<template>
    <div class="user-lists">
        <mine-cell :title="this.nickname" :img="this.img"></mine-cell>
        <group>
            <cell title="修改信息" is-link="is-link" :link="{path: '/User/Profile'}">
                <img
                    slot="icon"
                    width="20"
                    style="display:block;margin-right:5px;"
                    :src="this.modifyIcon"/>
            </cell>
            <cell title="浏览记录" is-link="is-link" :link="{path: '/User/History'}">
                <img
                    slot="icon"
                    width="20"
                    style="display:block;margin-right:5px;"
                    :src="this.viewHistoryIcon"/>
            </cell>
        </group>
        <group>
            <cell title="历史推文" is-link="is-link" @click.native="toArticleHistroy">
                <img
                    slot="icon"
                    width="20"
                    style="display:block;margin-right:5px;"
                    :src="this.articleHistoryIcon"/>
            </cell>
        </group>
    </div>
</template>

<script>
    import {Group, Cell} from 'vux'
    import MineCell from '@/components/MineCell'
    import {Util} from '@/js/Util'
    import {Config} from '@/js/Config'

    import modifyIcon from '../../assets/modify-info.png'
    import viewHistoryIcon from '../../assets/view-history.png'
    import articleHistoryIcon from '../../assets/history-article.png'

    export default {
        components: {
            MineCell,
            Group,
            Cell
        },
        mounted () {
            this.setTitle();
            // 微信登录
            this.loginWechat(Util.getUrlParam('code'));
        },
        data () {
            return {
                img: '',
                nickname: '',
                modifyIcon: modifyIcon,
                viewHistoryIcon: viewHistoryIcon,
                articleHistoryIcon: articleHistoryIcon
            }
        },
        methods: {
            setTitle() {
                document.title = '个人中心';
            },
            // 授权登录
            loginWechat(code) {
                // 判断是否有账号信息
                if (!sessionStorage.getItem('MeiJingKu_openid')) {
                    if (!code) {
                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config._appid + '&r' +
                                'edirect_uri=' + encodeURIComponent(location.href) + '&response_type=code&scope' +
                                '=snsapi_userinfo&state=1#wechat_redirect';
                    }
                }else {
                    this.getUserInfo();
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                // 测试接口
                // this.$http.post('user/LoginByOpenid/v1?openid=1').then(response => {
                this.$http.post('user/LoginByCode/v1?code=' + code).then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if (!result.code) {
                            sessionStorage.setItem('MeiJingKu_openid', result.data.openid);
                            this.getUserInfo();
                        } else {
                            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                            Config._appid + '&redirect_uri=' + encodeURIComponent(location.href) + '&respon' +
                                            'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                        }
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            // 获取用户信息
            getUserInfo() {
                this.$vux.loading.show({text: 'Loading'});
                let openid = sessionStorage.getItem('MeiJingKu_openid');
                this.$http.get('user/PersonalCenter/v1?openid=' + openid).then(response => {
                    console.log(response.data);
                    this
                            .$vux
                            .loading
                            .hide();
                    let result = response.data;
                    this.img = result.data.photo;
                    this.nickname = result.data.nickanme;
                }, response => {
                    Util.errorWarning(this);
                });
            },
            toArticleHistroy() {
                this.$router.push({
                    name: 'jump'
                })
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    .user-lists {
        margin-top: 2rem;
    }
</style>